<template>
    <router-view></router-view>
    <div class="footer">
        <div @click="status = 1; jump('/')">
            <img src="../assets/shouye.png" alt="" v-if="status == 1">
            <img src="../assets/shouye1.png" alt="" v-else>
            <p :style="{ color: status == 1 ? 'rgb(1,157,233)' : '' }">首页</p>
        </div>
        <div @click="status = 2; jump('/personal')">
            <img src="../assets/gonglue.png" alt="" v-if="status == 2">
            <img src="../assets/gonglue1.png" alt="" v-else>
            <p :style="{ color: status == 2 ? 'rgb(1,157,233)' : '' }">攻略</p>
        </div>
        <div @click="status = 3; jump('/strategy')">
            <img src="../assets/geren.png" alt="" v-if="status == 3">
            <img src="../assets/geren1.png" alt="" v-else>
            <p :style="{ color: status == 3 ? 'rgb(1,157,233)' : '' }">个人中心</p>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
let status = 1;
const router = useRouter()
function jump(site) {
    router.push({
        path: site,
    })
}

</script>

<style scoped>
.footer {
    width: 100%;
    height: 70px;
    background-color: white;
    position: fixed;
    padding: 5px 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
}
.footer div{
    display: flex;

    justify-content: center;
    flex-wrap: wrap;
}
.footer img{
    width: 30px;
    height: 30px;
}
.footer p{
    width: 100%;
    text-align: center;
    font-size: 12px;
}
</style>